<template>
    <el-dialog
            :visible.sync="dialogVisible"
            width="400px"
            :before-close="closeDialog"
            append-to-body
            title="添加资源"
    >
    
    
        <el-form  :label-position="labelPosition"  label-width="70px" ref="form" :model="form"  v-loading="loading">
          <el-form-item prop="parentResourceName" label="父资源">
            <el-input size= "small" type="text" disabled v-model="form.parentResourceName"></el-input>
          </el-form-item>
            <el-form-item prop="resourceType" label="资源类型">
                <el-select v-model="form.resourceType" placeholder="请选择"  size= "small">
                    <el-option
                    v-for="item in resourceTypeOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item prop="resourceCode" label="资源编码">
                <el-input size= "small" type="text" placeholder="请输入资源编码" v-model="form.resourceCode"></el-input>
            </el-form-item>
            <el-form-item prop="resourceName" label="资源名称">
                <el-input size= "small" type="text" placeholder="请输入资源名称" v-model="form.resourceName"></el-input>
            </el-form-item>

            <el-form-item prop="urlPath" label="路径">
                <el-input size= "small"  placeholder="请输入路径" type="text" v-model="form.urlPath"></el-input>
            </el-form-item>
            
            <el-form-item prop="icon" label="图标">
                <el-input size= "small" placeholder="请输入图标" type="text" v-model="form.icon"></el-input>
            </el-form-item>

            <el-form-item prop="order" label="排序">
                <el-input size= "small" placeholder="请输入排序" type="text" v-model="form.order"></el-input>
            </el-form-item>
            
            <el-form-item prop="remark" label="备注">
                <el-input size= "small" placeholder="请输入备注" type="textarea" v-model="form.remark"></el-input>
            </el-form-item>
        </el-form>
        
        <div class="btn-group">
            <el-button type="text" size="small" plain @click="closeDialog">取消</el-button>
            <el-button type="primary"  size="small" :disabled="loading" @click="submit">确定</el-button>
        </div>
    </el-dialog>
</template>

<script>
    import {addResource} from '@/api/resource'
    export default {
        data(){
            return {
                //资源类型
                resourceTypeOptions:[
                    {
                        "value":"MENU",
                        "label":"菜单"
                    },{
                        "value":"SUBMENU",
                        "label":"子菜单"
                    },{
                        "value":"GROUP",
                        "label":"组"
                    },{
                        "value":"BUTTON",
                        "label":"按钮"
                    }
                ],
                labelPosition:'right',
                dialogVisible: false,
                loading: false,
                parent:{},
                form: {
                    parentResourceName:"",
                    parentResourceId:"",
                    systemCode:"",
                    resourceCategory:"",
                    resourceType:"",
                    resourceCode:"",
                    resourceName:"",
                    urlPath:"",
                    icon:"",
                    order:0,
                    remark:""
                },
            }
        },
        created(){

        },
        methods:{
            showDialog(parentRes){
                this.parent = parentRes;
                this.dialogVisible = true;
                this.form.systemCode = parentRes.systemCode;
                this.form.resourceCategory = parentRes.resourceCategory;
                this.form.parentResourceId = parentRes.resourceId;
                this.form.parentResourceName = parentRes.resourceName;
                let resourceType = parentRes.resourceType;
                const RESOURCE_TYPE_OPTIONS_MAP = {
                  MENU: [
                    { value: "SUBMENU", label: "子菜单" },
                    { value: "GROUP", label: "组" },
                    { value: "BUTTON", label: "按钮" }
                  ],
                  SUBMENU: [
                    { value: "SUBMENU", label: "子菜单" },
                    { value: "GROUP", label: "组" },
                    { value: "BUTTON", label: "按钮" }
                  ],
                  GROUP: [
                    { value: "BUTTON", label: "按钮" }
                  ],
                  BUTTON: []
                };
              const DEFAULT_RESOURCE_TYPE_OPTIONS = [
                { value: "MENU", label: "菜单" },
                { value: "SUBMENU", label: "子菜单" },
                { value: "GROUP", label: "组" },
                { value: "BUTTON", label: "按钮" }
              ];

              if (RESOURCE_TYPE_OPTIONS_MAP.hasOwnProperty(resourceType)) {
                this.resourceTypeOptions = RESOURCE_TYPE_OPTIONS_MAP[resourceType];
              } else {
                // 处理非法 resourceType，回退到默认选项
                this.resourceTypeOptions = DEFAULT_RESOURCE_TYPE_OPTIONS;
              }

            },
            closeDialog(){
                this.form = {}
                this.dialogVisible = false
                this.loading = false
            },

            submit(){
                this.$refs.form.validate(async valid => {
                    if(valid){
                        try{
                            this.loading = true
                            let res = await addResource(this.form);
                            if(res.status === '200'){
                                this.$message.success('添加成功')
                                this.closeDialog()
                                this.$emit('success',this.parent,res.data)
                            }else{
                                this.$message.error(res.msg)
                                this.loading = false
                            }
                        }catch{
                            this.loading = false
                        }
                    }
                });
            }
        }
    }
</script>
<style lang="scss" scoped>
    .btn-group{
        display: flex;
        justify-content: right;
        .el-button{
            width: 50px;
        }
    }
    .el-form-item{
        height: 40px;
    }
</style>